<template>
  <div class="goodsInfo-container">
      <transition 
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
          <div class="ball" v-show="ballflag" ref="ball"></div>
      </transition>
      
      <!-- 轮播图部分 -->
      <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						 <swiper :lunbotuList="imagesList" :is-full="false"></swiper>
					</div>
				</div>
			</div>
      <!-- 商品部分 -->
      <div class="mui-card">
				<div class="mui-card-header">{{ goodsInfoList.title }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>
              市场价：<del>￥{{ goodsInfoList.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now-price">￥{{ goodsInfoList.sell_price }}</span>
            </p>
            <div class="sell">
              购买数量：
              <num></num>
            </div>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
            </p> 
					</div>
				</div>
			</div>
      <!-- 详情部分 -->
      <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>
              商品货号：{{ goodsInfoList.goods_no }}
            </p>
            <p>
              商品库存：{{ goodsInfoList.stock_quantity }}件
            </p>
            <p>
              上架时间：{{ goodsInfoList.add_time | dateStrFormat }}
            </p>
					</div>
				</div>
				<div class="mui-card-footer">
          <mt-button type="primary" size="large" plain @click="imagesDesc(id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" plain @click="goCmt(id)">商品评论</mt-button>
        </div>
			</div>
  </div>
</template>

<script>
import swiper from '../swiper/swiper.vue'
import num from '../numbers/num.vue'
import mui from '../../lib/mui/js/mui.js'
export default {
  data(){
      return {
          id: this.$route.params.id,
          imagesList: [],
          goodsInfoList: {},
          ballflag: false,       // 控制小球显示隐藏
          count: 1
      }
  },
  created(){
      this.getImages();
      this.getGoodsInfo();
  },
  mounted(){
    mui('.mui-numbox').numbox();
  },
  methods:{
    getImages(){
      this.$http.get('api/getthumimages/' + this.id).then(result => {
        if(result.body.status === 0) {
          result.body.message.forEach(item => {
            item.img = item.src;
          })
          this.imagesList = result.body.message;
        }
      })
    },
    getGoodsInfo(){
      this.$http.get('api/goods/getinfo/' + this.id).then(result => {
        console.log(result.body.message[0])
        if(result.body.status === 0) {
          this.goodsInfoList = result.body.message[0];
        }
      })
    },
    imagesDesc(id){
      // console.log(id)
      this.$router.push({ name:'goodsDesc', params: { id } })
    },
    goCmt(id){
      // console.log(id)
      this.$router.push({ name:'goodscomment', params: { id }})
    },
    addToShopCar(){
        this.ballflag = !this.ballflag;
    },
    beforeEnter(el){
        el.style.transform = 'translate(0,0)';
    },
    enter(el, done){
        el.offsetWidth;
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        const badgePosition = document.getElementById('badge').getBoundingClientRect();
        const xDist = badgePosition.left - ballPosition.left;
        const yDist = badgePosition.top - ballPosition.top;
        el.style.transform = `translate(${xDist}px, ${yDist}px)`;
        el.style.transition = 'all 0.6s ease';
        done();
    },
    afterEnter(el){
        this.ballflag = !this.ballflag;
    }
  },
  components: {
    swiper,
    num
  } 
}
</script>

<style lang="less" scoped>
   .goodsInfo-container {
     background-color: #eee;
     overflow: hidden;
     .now-price {
       color: red;
       font-size: 16px;
       font-weight: bold;
     }
    .sell {
      margin-bottom: 10px;
    }
     .mui-card-footer {
       display: block;
       button {
         margin: 15px 0;
       } 
     }
     .ball {
       width: 15px;
       height: 15px; 
       border-radius: 50%;
       background-color: red;
       position: absolute;
       top: 391px;
       left: 152px;
       z-index: 99;
     }     
   }
</style>


